<template>
  <view class="service_record_info_box">
    <view class="service_record_box">
      <view class="server_info_box">
        <view class="server_name">{{ orderInfo.goodsName }}</view>
        <view class="server_num">
          <view>服务天数：{{ orderInfo.serviceDays }}</view>
          <view class="dividing_line"></view>
          <view>宠物数量：{{ orderInfo.petNum }}</view>
        </view>
      </view>
      <view class="record_box">
        <view class="record_item_box" v-for="item in serviceList" :key="item">
          <view class="server_status">
            {{ item.serviceStartTime.substring(0, 10) }}
            <text :class="[item.status===2?'c_FF6084':item.status===1?'c_7C807F':'']"> 【{{
                getStatusText(item.status)
              }}】
            </text>
          </view>
          <view class="begin_time" v-if="item.startTime">开始时间：{{ item.startTime }}</view>
          <view class="over_time" v-if="item.finishTime">完成时间：{{ item.finishTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, reactive} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import api from '@/api/index'

let orderInfo = reactive({
  id: '',
  goodsName: '',
  serviceDays: '',
  petNum: '',
});
const getStatusText = (status) => {
  switch (status) {
    case 0:
      return '待接单'
    case 1:
      return '待服务'
    case 2:
      return '服务中'
    case 3:
      return '已完成'
    case 4:
    case 5:
      return '已关闭'
    case 6:
      return '待付款'
    default:
      return ''
  }
}
let serviceList = ref([]);
//获取服务列表
const getServiceList = async () => {
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  const res = await api({
    method: 'get',
    contentType: 'json',
    url: `/mall/order/order-detail/getOrderDetailList`,
    data: {
      orderId: orderInfo.id
    }
  })
  if (res.code === 0) {
    serviceList.value = res.data;
  }
  uni.hideLoading();
}

onLoad(async (options) => {
  orderInfo.id = options.id;
  orderInfo.goodsName = options.goodsName;
  orderInfo.serviceDays = options.serviceDays;
  orderInfo.petNum = options.petNum;
  await getServiceList();
})
</script>

<style scoped lang="scss">
.service_record_info_box {
  padding: 32rpx;
  box-sizing: border-box;

  .service_record_box {
    padding: 40rpx 32rpx;
    box-sizing: border-box;
    width: 100%;
    background: #FFFFFF;
    border-radius: 24rpx;

    .server_info_box {
      border-bottom: 1rpx solid #E6E6E6;
      padding-bottom: 40rpx;
      box-sizing: border-box;

      .server_name {
        font-weight: 500;
        font-size: 32rpx;
        color: #1A1A1A;
      }

      .server_num {
        display: flex;
        align-items: center;
        margin-top: 16rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #7C807F;

      }

      .dividing_line {
        width: 2rpx;
        height: 24rpx;
        background: #CACCCC;
        margin: 0 24rpx;
      }
    }

    .record_box {
      margin-top: 40rpx;

      .record_item_box {
        position: relative;
        border-left: 1rpx solid #E6E6E6;
        padding: 1rpx 0 80rpx 50rpx;
        box-sizing: border-box;


        .server_status {
          font-weight: 500;
          font-size: 30rpx;
          color: #1B2120;
          margin-top: -10rpx;
        }

        .begin_time {
          font-weight: 400;
          font-size: 26rpx;
          color: #7C807F;
          margin-top: 32rpx;
        }

        .over_time {
          font-weight: 400;
          font-size: 26rpx;
          color: #7C807F;
          margin-top: 8rpx;
        }
      }

      .record_item_box::after {
        content: "";
        position: absolute;
        border: 4rpx solid #fff;
        left: -12rpx;
        top: 0;
        width: 16rpx;
        height: 16rpx;
        background: #D0D1D2;
        border-radius: 50%;
      }

      .record_item_box:last-child {
        border: none;
      }
    }
  }
}

.c_7C807F {
  color: #7C807F !important;
}

.c_FF6084 {
  color: #FF6084 !important;
}

</style>